<template>
	<div id="userPage">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:pager-config="pageConfig"
			:toolbar-config="toolbarConfig"
			:edit-config="{ trigger: 'dbclick', mode: 'row', showStatus: true }"
			@page-change="pageChange"
		>
			<template #name="{ row }">
				<span>{{ row.userRealName }}</span>
			</template>
			<template #account="{ row }">
				<span>{{ row.userAccount }}</span>
			</template>
			<template #phone="{ row }">
				<span>{{ row.userTelephone }}</span>
			</template>
			<template #organization="{ row }">
				<span>{{ orgListFun(row.orgId) }}</span>
			</template>
			<template #userGender="{ row }">
				<span>{{ row.userGender == '0' ? '男' : '女' }}</span>
			</template>
			<template #whetherEnable="{ row }">
				<span>{{ row.whetherEnable == '0' ? '已启用' : '未启用' }}</span>
			</template>
			<template #toolbar_buttons>
				<el-input
					v-model="userInput"
					class="user_input"
					placeholder="请输入查找的用户"
					size="medium"
				></el-input>
				<el-button type="primary" size="small" @click="handlerSave">
					查询
				</el-button>
				<el-button type="primary" size="small" @click="handlerAddClick">
					新增
				</el-button>
			</template>
			<template #edit="{ row }">
				<el-button
					type="text"
					size="small"
					:datalist="row"
					@click="handlerEditRow(row)"
				>
					编辑
				</el-button>
				<el-button type="text" size="small" @click="deldectUser(row)">
					删除
				</el-button>
			</template>
		</shyt-table>
		<!-- 修改弹框 -->
		<userModification
			:dialog-table-visible="dialogTableVisible"
			:parent-menu="parentMenu"
			@customclick="customHandel"
		></userModification>
		<!-- 新增弹框 -->
		<newlyDialog :increased="increased" @newlyClick="newlyClick"></newlyDialog>
	</div>
</template>

<script>
import { userManagement, userDelete } from '@/http/api.js'
import userModification from './components/modificationDialog.vue'
import newlyDialog from './components/newlyDialog.vue'
import { getOrgList } from '@/http/org'
export default {
	name: 'UserPage',
	components: {
		userModification,
		newlyDialog,
	},
	data() {
		return {
			doctorList: [],
			dialogTableVisible: false,
			increased: false,
			loading: false,
			userInput: '',
			radio: '0',
			//输入框校验
			rules: {
				userRealName: [
					{ required: true, message: '用户名称不能为空', trigger: 'blur' },
				],
				userAccount: [
					{ required: true, message: '账号不能为空', trigger: 'blur' },
				],
				userPassword: [
					{ required: true, message: '密码不能为空', trigger: 'blur' },
					{ min: 6, message: '不得少于6位', trigger: 'blur' },
				],
				userTelephone: [
					{ required: true, message: '手机号不能为空', trigger: 'blur' },
					{
						pattern:
							/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
						message: '目前只支持中国大陆的手机号码',
					},
				],
			},

			columns: [
				{
					field: 'name',
					title: '用户名称',
					slots: { default: 'name' },
				},
				{
					field: 'roleName',
					title: '角色名称',
				},
				{
					field: 'account',
					title: '账号',
					slots: { default: 'account' },
				},
				{
					field: 'phone',
					title: '手机号',
					slots: { default: 'phone' },
				},
				{
					field: 'userGender',
					title: '性别',
					slots: { default: 'userGender' },
				},
				{
					field: 'organization',
					title: '机构名称',
					slots: { default: 'organization' },
				},
				{
					field: 'whetherEnable',
					title: '是否启用',
					slots: { default: 'whetherEnable' },
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			],
			tableData: [],
			// 按钮
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			// 分页
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
			parentMenu: {},
		}
	},
	created() {
		this.getOrgList({})
		this.getData(this.pageConfig.currentPage, this.pageConfig.pageSize)
	},
	methods: {
		orgListFun(orgUuid) {
			let value = '-'
			if (this.orgList && this.orgList.length > 0) {
				let orgObj = this.orgList.find(info => info.id == orgUuid)
				value = orgObj ? orgObj.orgName : '-'
			}
			return value
		},
		getOrgList(param) {
			getOrgList(param).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.orgList = data.data
				}
			})
		},
		// 修改弹窗
		customHandel(bol) {
			this.dialogTableVisible = bol.verdict
			if (bol.typeValue == 1) {
				this.getData(this.pageConfig.currentPage, this.pageConfig.pageSize)
				this.getOrgList({})
			}
		},
		// 新增弹窗
		newlyClick(newly) {
			this.increased = newly.verdict
			if (newly.typeValue == 1) {
				this.getData(
					(this.pageConfig.currentPage = 1),
					(this.pageConfig.pageSize = 10),
				)
				this.getOrgList({})
			}
		},

		getData(pageConfig, pageSize, userRealNameOrInputCode) {
			userManagement({
				pageNum: pageConfig,
				pageSize: pageSize,
				userRealNameOrInputCode,
			}).then(({ data }) => {
				this.tableData = data.data.records
				this.pageConfig.total = data.data.total
			})
		},
		// 翻页事件
		pageChange({ currentPage, pageSize }) {
			this.getData(currentPage, pageSize, this.userInput.toUpperCase())
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
		},
		// 编辑
		handlerEditRow(row) {
			this.parentMenu = this._.cloneDeep(row)
			console.log(this.parentMenu)
			this.dialogTableVisible = true
		},
		// 删除
		deldectUser(row) {
			this.$confirm('是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					let usersDelete = row
					userDelete(usersDelete).then(({ data }) => {
						if (data.head.code == 200) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							})
							this.getData(
								this.pageConfig.currentPage,
								this.pageConfig.pageSize,
							)
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 新增
		handlerAddClick() {
			this.increased = true
		},
		// 查询
		handlerSave() {
			if (this.userInput == '') {
				this.getData(
					(this.pageConfig.currentPage = 1),
					(this.pageConfig.pageSize = 10),
				)
			} else {
				this.getData(
					(this.pageConfig.currentPage = 1),
					(this.pageConfig.pageSize = 10),
					this.userInput.toUpperCase(),
				)
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.user_input {
	width: 200px;
}
</style>
